<template>
	<view class="comment flex--col">
		<Loading v-if="loading">正在努力加载中...</Loading>
		<template v-else>
			<view class="comment-heading">
				<CommentHeading :commentInfo="commentInfo"></CommentHeading>
			</view>
			<view class="comment-input">
				<CommentInput @refreshComment="handleRefreshComment" :type="'spot'" :categories="spotCategory">
					有什么值得记住的景点吗
				</CommentInput>
			</view>
			<view class="comment-input">
				<CommentInput @refreshComment="handleRefreshComment" :score="score" @changeScore="handleChangeScore" :type="'user'" :categories="characterCategory">
					写一写你对出游同伴的感受
				</CommentInput>
			</view>
			<view class="comment-submit flex--row">
				<view class="comment-submit-button text--main-dark" @click="submitComments" role="button">
					提交
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import CommentHeading from "./components/CommentHeading.vue"
	import CommentInput from "./components/CommentInput.vue"
	import * as CommentApi from "@/api/evaluation/evaluation.js"
	import * as AssistApi from "@/api/assist/blind.js"
	import * as Travel from "@/core/constant/travel.js"
	import Loading from "@/components/Loading/Loading.vue"
	import { checkRole } from "@/core/app.js"
	import * as Role from "@/core/constant/role.js"
	
	export default {
		components:{
			CommentHeading,
			CommentInput,
			Loading
		},
		data(){
			return {
				spotCategory:['玄武湖','夫子庙','红山动物公园'],
				characterCategory:['态度','行为','细节','品格'],
				attractionsList:[],
				userList:[],
				commentInfo:{},
				loading:false,
				submit:false,
				score:0,
			}
		},
		methods:{
			async getPreCommentData(travelId){
				const data = await CommentApi.evaluationInfo(travelId)
				this.commentInfo = data
				this.spotCategory = this.commentInfo.attractionsList
			},
			handleRefreshComment(type,comments){
				if(type === "spot"){
					this.attractionsList = comments
				}else{
					this.userList = comments
				}
			},
			async submitComments(){
				const userId = checkRole() === Role.ROLE_BLIND ? this.commentInfo.userId : this.commentInfo.volunteerId
				const {travelId} = this.commentInfo
				for(const userComment of this.userList){
					userComment.score = this.score
				}
				const params = {
					travelId,
					userId,
					role:this.$store.getters.role,
					userList:this.userList,
					attractionsList:this.attractionsList,
				}
				await CommentApi.submitEvaluation(params)
				
				this.submit = true
				this.$store.dispatch("travel/setCurrentTravelStatus",Travel.TRAVEL_EVALUATED)
				this.$store.dispatch("travel/removeTravel",travelId)
				uni.switchTab({
				  url: "pages/index/index"
				})
				// this.$navTo("pages/index/index")
			},
			handleChangeScore(score){
				this.score = +score
			}
		},
		async onLoad(options){
			console.log("Comment.vue onLoad")
			const travelId = parseInt(options.travelId)
			this.loading = true
			await this.getPreCommentData(travelId)
			this.loading = false
		},
		onBackPress(){
			uni.switchTab({
			  url: "pages/index/index"
			})
			// this.$navTo("pages/index/index")
			if(!this.submit){
				this.$error("若本次出行没有评价，则不算做一次完整的出行，确定退出吗？",() =>{
					return true
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width:100%;
		height:100%;
		background-color: #fff;
	}
	
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	
	.comment{
		width:600rpx;
		height:100vh;
		overflow: scroll;
		margin:auto;
		padding:10% 0%;
		gap:24px;
		box-sizing: border-box;
		
		position:relative;
	}
	
	.comment-submit{
		justify-content: flex-end;
	}
	
	.comment-submit-button{
		@include border-four-roundings;
		padding:4px 8px;
		
	}

</style>
